import React from 'react';
import { inject, observer } from 'mobx-react';
import { TabPage, RouteLayout } from 'weaver-mobile-page';
import { toJS } from 'mobx';
import { Switch, Route, Redirect, Link } from 'react-router-dom';
import { Bubble, Tools, Toast, Icon, ActivityIndicator } from 'weaver-mobile';
import AttentionList from './AttentionList'
import Follow from '../follow/index';
import TagManage from '../follow/tagManage';
import TagEdit from '../follow/tagEdit';
import * as EmSDK from '../../util/emSDK';
// import { getTree } from 'pc4mobx/workflow/apis/monitor';
const getLabel = Tools.getLabel;
const Item = TabPage.Item;
@inject('attentionStore')
@observer
export default class App extends React.Component {
    constructor(props) {
        super(props);
    }

    componentWillMount() {
        const { location, attentionStore } = this.props;
        const { pathname = "" } = location;
        const { setState, listAd_All, listAd_Inupervise, listAd_Supervised ,tabs,getTreeCount,getTree} = attentionStore;
        getTree();
        if (pathname) {
            let nowTab ;
            let nowListAd=listAd_All;
            let pathidArr  = (pathname.split('/'))
            let pathid = pathidArr[pathidArr.length-1]
            tabs.map((val,index)=>{
                if(val.groupid==pathid){
                    nowTab = index
                }
            })
            setState({ nowTab })    
        }
    }

    componentWillUpdate(nextProps) {
        const { location, attentionStore } = nextProps;
        const { pathname = "" } = location;
        const { setState, nowTab, listAd_All, listAd_Inupervise, listAd_Supervised,tabs,nowListAd} = attentionStore;
        if (pathname.indexOf("/attention") == 0) {
            EmSDK.controlEmTopNav({ title:  getLabel(503951, '关注事宜') , showCloseButton: true })
        }
        if (pathname) {
            let nowTab ;
            let nowListAd = listAd_All;
            let pathidArr  = (pathname.split('/'))
            let pathid = pathidArr[pathidArr.length-1]
            tabs.map((val,index)=>{
                if(val.groupid==pathid){
                    nowTab = index
                }
            })
            setState({ nowTab })
        }
    }

    componentDidMount=()=>{
        // const { tabs, visible, isShowLoading ,setState,nowTab} = this.props.attentionStore;
        // console.log(tabs)
        // setTimeout(function(){
        //     setState({ nowTab:9 })
        // },2000)
        // const { pathname = "" } = this.props.location;
        // if (pathname) {      
        //     let nowTab;
        //     let pathidArr  = (pathname.split('/'))
        //     let pathid = pathidArr[pathidArr.length-1]
        //     toJS(tabs).map((val,index)=>{
        //         if(val.path==pathid){
        //             nowTab = index
        //         }
        //     })
        //     setState({ nowTab })
        //     console.log(nowTab)
        // }
    }

    handleSelect = (opt) => {
        const { setState,tag_manage_layout } = this.props.attentionStore;
        
        if(opt.key=='batchAttention'){
            setState({
                visible: false,
                showCheck: true,
                bottomBth:getLabel('503955','批量关注')
            });
        }else if(opt.key=='forward'){
            setState({
                visible: false,
                showCheck: true,
                bottomBth:getLabel('6011','转发')
            });
        }
        else if(opt.key=='tagSetting'){
            const {attentionStore} =this.props;
            const nowStore=attentionStore.nowListAd.route;
            this.props.history.push(nowStore+'/follow/tagManage')
            setState({
                visible: false,
            });
        }
        
    }

    handleVisibleChange = (visible) => {
        const { setState } = this.props.attentionStore;
        setState({ visible });
    };

    changeTab = (obj, index) => {
        const { changeTab } = this.props.attentionStore;
        const url = '/attention/' + obj.groupid;
        this.props.history.push(url);
        changeTab(obj);
    }



    render() {
        const {attentionStore} =this.props;
        const nowStore=attentionStore.nowListAd.route;
        const { tabs, visible, isShowLoading, nowTab,tag_manage_layout} = this.props.attentionStore;
        const tabProps = {
            onChange: this.changeTab,
            page:nowTab,
        };
        const popoverProps = {
            visible,
            overlay: [
            <Item key="batchAttention" value="batchAttention" data-seed="logId">{ getLabel('503955','批量关注')}</Item>,
            <Item key="tagSetting" value="tagSetting" data-seed="logId">{ getLabel('503952','关注类型设置') }</Item>,
            // <Item key="forward" value="forward" data-seed="logId">{ getLabel('6011','转发')}</Item>
            ],
            onSelect: this.handleSelect,
            onVisibleChange: this.handleVisibleChange,
        };
         return (
            <div>
                <TabPage
                    className="tab-page-example"
                    span={[11, 2]}
                    tabs={tabs}
                    tabProps={tabProps}
                    defaultTabBarProps={{ page: 3 }}
                    popover
                    popoverProps={popoverProps}
                />
                <Switch>
                
                     {tabs.map((val,index)=>{
          return  <Route path={"/attention/"+val.groupid} component={AttentionList} key={index}/>
        })}
                   <Redirect exact path="/attention" to={{ pathname: '/attention/flowAll'}} /> 
                </Switch>
                <Route
                        key={"follow"}
                        path={nowStore+'/follow'}
                        render={() => (
                            <RouteLayout>
                                <div
                                    key="wmPoutePageDemo"
                                    className="wm-route-layout wm-demo-route-layout-page"
                                >
                                  <Follow store={this.props.attentionStore} type={'attentionpage'}/>
                                </div>
                            </RouteLayout>
                        )}
                    />
                <Route
                    key={'tagManage'}
                    path={nowStore+'/follow/tagManage'}
                    render={() => (
                        <RouteLayout>
                            <div
                                key="wmPoutePageDemo"
                                className="wm-route-layout wm-demo-route-layout-page"
                            >
                                <TagManage store={this.props.attentionStore} type='attentionpage'/>
                            </div>
                        </RouteLayout>
                    )}
                />
                <Route
                    key={'tagEdit'}
                    path={nowStore+'/follow/tagManage/tagEdit'}
                    render={() => (
                        <RouteLayout>
                            <div
                                key="wmPoutePageDemo"
                                className="wm-route-layout wm-demo-route-layout-page"
                            >
                                <TagEdit store={this.props.attentionStore} type='attentionpage'/>
                            </div>
                        </RouteLayout>
                    )}
                />
                {isShowLoading && <ActivityIndicator
                    toast
                    text={getLabel(500408, "加载中...")}
                    animating={isShowLoading}
                />}
            </div>
        );
    }
}